<template>
	<view class="curriculum_wrapper">
		<view class="curriculum_list" v-if="curriculum_list.length > 0">
			<view class="curriculum_item" v-for="item in curriculum_list" :key="item.id" @click="GotoCurriculum(item)">
				<view class="picture">
					<img :src="item.cover" alt="" @error="tabErrorPicture(item.id)" />
				</view>
				<view class="chat_intro">
					<view class="title">{{item.title}}<br />{{item.description}}</view>
					<view class="time">学习时间<br />{{item.start_time}}-{{item.end_time}}</view>					
				</view>
			</view>
		</view>
		<view class="noData" v-else>
			<i class="iconfont icon-zanwushuju"></i>
			<text class="name">暂无兑换课程</text>
		</view>
	</view>
</template>

<script>
	import { api_getExchangeCurriculum } from '@/api/api'
	export default {		
		data() {
			return {
				shopname: uni.getStorageSync('shopname'),
				curriculum_list: [],
				total: 0,
				errorProduct: require('@/static/img/default_image.jpg'), 
			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			init(){	// 初始化
				uni.showLoading({ title: '数据加载中...'	});
				api_getExchangeCurriculum({shop_name: this.shopname}).then(res => {
					let { code,data: {list,total},msg } = res;
					uni.hideLoading();
					if (code == 1) {
						this.curriculum_list = list;
						this.total = total;
					} else {
						uni.showToast({ title: msg,icon: 'error' });
					}
				}).catch(err => {
					uni.hideLoading();
					console.log(err);
				});
			},
			tabErrorPicture(id){	// 兑换课程列表图片加载失败
				let i = this.curriculum_list.findIndex(v => v.id == id);
				this.curriculum_list[i].cover = this.errorProduct;		
			},
			GotoCurriculum(v){	// 兑换课程列表item项		
				let { start_time,end_time,info_type,type } = v;
				let starttime = new Date(start_time).getTime();
				let endtime = new Date(end_time).getTime();
				let curtime = Date.now();				
				if (curtime < starttime || curtime > endtime) {
				  uni.showToast({ title: '使用期限未到或已到',icon: 'error' });
				  return;
				}
				if (info_type == 'knowledge') {
					type == 'video' && uni.navigateTo({ url: `/pages/videocontent/index?id={v.id}` });
					type == 'audio' && uni.navigateTo({ url: `/pages/audiocontent/index?id={v.id}` });
					type == 'image_text' && uni.navigateTo({ url: `/pages/image_textcontent/index?id={v.id}` });
				}
				if (info_type == 'column') {
					uni.navigateTo({ url: `/pages/product/index?id={v.id}` });
				}
				if (info_type == 'ExamPaper') {
					uni.navigateTo({ url: `/pages/examcontent/index?id={v.id}` });
				}
			},
			nanoid(len = 6) {  // 生成随机数
			    if (len <= 11) {
			        return Math.random().toString(36).slice(2,2+len).padEnd(len,'0')   
			    } else {
			        return this.nanoid(11) + this.nanoid(len - 11)   
			    }    
			}
		}
	}
</script>

<style lang="scss" scoped>
.curriculum_wrapper{
	.curriculum_list{
		.curriculum_item{
			display: flex;	
			padding: 10px 10px 10px 15px;
			box-sizing: border-box;
			background-color: #fafafa;
			margin: 0 0 10px 0;
			.picture{
				width: 80px;
				height: 80px;
				overflow: hidden;
				img{
					display: block;
					width: 80px;
					height: 80px;
					margin: 0;
				}
			}
			.chat_intro{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 0 0 0 10px;
				box-sizing: border-box;
				.title{
					font-size: 14px;
				}
				.time{
					font-size: 12px;
					color: #999;
				}					
			}
		}
	}
	.noData{
		padding: 50px 0 0;
		margin: 0 auto;
		text-align: center;
		.iconfont{
			display: block;
			margin: 0 auto;
			font-size: 100px;
			color: gray;
		}
		.name{
			font-size: 14px;
			color: #999;
		}
	}
}
</style>
